<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>��������</title>
<!-- ���ļ�Ϊ����ʾDemo��ʽ����Ŀ�в���Ҫ���� -->
<!--<link href="../../assets/code/demo.css" rel="stylesheet">-->
 <!---->
  <!--<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">-->
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
 
</head>
<body>
  <div class="demo-content">
    <div class="row">
      <div class="span8 offset3">
        <div id="t1">
          
        </div>
        <h2>����Ľڵ�</h2>
        <div class="log well"></div>
      </div>
    </div>
    
 
  <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
  <script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
 
<!-- script start --> 
    <script type="text/javascript">
        BUI.use('bui/tree',function (Tree) {
        
      //���ڵ����ݣ�
      //text : �ı���
      //id : �ڵ��id,
      //leaf ����ʾ�Ƿ�Ҷ�ӽڵ㣬���Բ��ṩ������childern,�Ƿ�Ϊ���ж�
      //expanded �� �Ƿ�Ĭ��չ��
      var data = [ 
          {text : '1',id : '1',children: [{text : '11',id : '11'}]},
          {text : '2',id : '2',expanded : true,children : [
              {text : '21',id : '21',children : [{text : '211',id : '211'},{text : '212',id : '212'}]},
              {text : '22',id : '22'}
          ]},
          {text : '3',id : '3'},
          {text : '4',id : '4'}
        ];
      //���������������ʾ���ڵ㣬���Կ��Բ�ָ�����ڵ�
      var tree = new Tree.TreeList({
        render : '#t1',
        nodes : data
      });
      tree.render();
 
      tree.on('itemclick',function(ev){
        var item = ev.item;
        $('.log').text(item.text);
      });
    });
    </script>
<!-- script end -->
  </div>
</body>
</html>